<template>
<div  class="home">
<div class="headwrap">
	<div  class="search"></div>
	<div  class="logo">
		<a href="###">
		<img id="con1" src="http://m.wangjiu.com/htmlResource/images/index/k02.png">
		<img id="con2" src="http://m.wangjiu.com/htmlResource/images/index/k01.png" style="display: none"></a>
	</div>
	<div  class="con">
		<input type="text" name="">
		<a   class="search_index"></a>
	</div>
</div>
<div class="banner">
   <div class="swiper-container">
	   <div  class="swiper-wrapper">
	   	  <div  class="swiper-slide"><img src="http://img1.wangjiu.com/ad/20170410/default/1491816778984107"></div>
	   	  <div  class="swiper-slide"><img src="http://img1.wangjiu.com/ad/20170412/default/1491978539181807"></div>
	   	  <div  class="swiper-slide"><img src="http://img0.wangjiu.com/ad/20170417/default/1492412459065547"></div>
	   	  <div  class="swiper-slide"><img src="http://img3.wangjiu.com/ad/20170412/default/1491989750737964"></div>
	   	  <div  class="swiper-slide"><img src="http://img3.wangjiu.com/ad/20161223/default/1482490659629987"></div>
	   </div>
	       <div class="swiper-pagination"></div>
	</div>
 </div>
 <div class="menu">
 	
 		<router-link to="/home_one" class="link"><img src="http://img0.wangjiu.com/ad/20170103/default/1483414723300575"><span>新人领券</span></router-link>
 		<router-link to="/home_two" class="link"><img src="http://img0.wangjiu.com/ad/20161228/default/1482904850320170"><span>限时秒抢</span></router-link>
 		<router-link to='/home_three' class="link"><img src="http://img0.wangjiu.com/ad/20161228/default/1482904860798454"><span>拼手气</span></router-link>
 		<router-link to="/home_for" class="link"><img src="http://img0.wangjiu.com/ad/20161228/default/1482904874055971"><span>乐视美酒</span></router-link>
 	
 </div>
<div class="contain">
	<a  class="pro0" href="###"><img src="http://img0.wangjiu.com/ad/20170322/default/1490165865525196"></a>
	<a  class="pro1" href="###"><img src="http://img0.wangjiu.com/ad/20170417/default/1492412470045562"></a>
	<a  class="pro2" href="###"><img src="http://img0.wangjiu.com/ad/20170316/default/1489631082213813"></a>
	<a  class="pro3" href="###"><img src="http://img0.wangjiu.com/ad/20170313/default/1489397590393730"></a>
	<a  class="pro4" href="###"><img src="http://img0.wangjiu.com/ad/20170424/default/1493025434446384"></a>
</div>
	<div class="stage">
		<div  class="stage_banner">
			<a href="###"><img src="http://img0.wangjiu.com/ad/20161018/default/1476760339522640"></a>
		</div>
		<div  class="stage_menu">
		<a href="###"  class="vos1"><img src="http://img0.wangjiu.com/ad/20161208/default/1481186366314847"></a>
		<a href="###"  class="vos2"><img src="http://img0.wangjiu.com/ad/20161208/default/1481186392617009"></a>
		<a href="###"  class="vos3"><img src="http://img0.wangjiu.com/ad/20161102/default/1478074771760112"></a>
		</div>
    </div>
    <div  class="box1">
    	<div  class="box1_coat">
    		<a href="###"><img src="http://img0.wangjiu.com/ad/20170412/default/1491977688617700"></a>
    	</div>
    	<div  class="box1_contain">
    	   <div   class="slide">
    		<a href="###"><span><img src="http://img0.wangjiu.com/board/20161014/default/1476430238598424"></span>
    		<p class="slide_name">荔仙庄园正牌</p>
    		<p class="slide_price">￥169.0</p></a>
    		</div>
    		<div   class="slide">
    		<a href="###"><span><img src="http://img0.wangjiu.com/ad/20170412/default/1491978043640283"></span>
    		<p class="slide_name">宝梦酒庄干红</p>
    		<p class="slide_price">￥299.0</p></a>
    		</div>
    		<div   class="slide">
    		<a href="###"><span><img src="http://img0.wangjiu.com/board/20161021/default/1477047659272637"></span>
    		<p class="slide_name">蓝珊干红</p>
    		<p class="slide_price">￥99.0</p>
    		</a>
    		</div>
    	</div>
    </div>
    <div  class="box1">
    	<div  class="box1_coat">
    		<a href="###"><img src="http://img0.wangjiu.com/ad/20170401/default/1491011909562019"></a>
    	</div>
    	<div  class="box1_contain">
    		  <div   class="slide">
    		<a href="###"><span><img src="http://img0.wangjiu.com/ad/20161116/default/1479282640766932"></span>
    		<p class="slide_name">43度茅台飞天</p>
    		<p class="slide_price">￥299.0</p></a>
    		</div>
    		<div   class="slide">
    		<a href="###"><span><img src="http://img0.wangjiu.com/ad/20161031/default/1477918897598790"></span>
    		<p class="slide_name">52度剑南春</p>
    		<p class="slide_price">￥549.0</p></a>
    		</div>
    		<div   class="slide">
    		<a href="###"><span><img src="http://img0.wangjiu.com/ad/20161031/default/1477919190144809"></span>
    		<p class="slide_name">洋河海之蓝</p>
    		<p class="slide_price">￥199.0</p>
    		</a>
    		</div>
    	</div>
    </div>
     <div  class="box1">
    	<div  class="box1_coat">
    		<a href="###"><img src="http://img0.wangjiu.com/ad/20170413/default/1492069903980462"></a>
    	</div>
    	<div  class="box1_contain">
    		  <div   class="slide">
    		<a href="###"><span><img src="http://img0.wangjiu.com/ad/20161031/default/1477919827873302"></span>
    		<p class="slide_name">轩尼诗VSOP</p>
    		<p class="slide_price">￥339.0</p></a>
    		</div>
    		<div   class="slide">
    		<a href="###"><span><img src="http://img0.wangjiu.com/ad/20161209/default/1481271222876622"></span>
    		<p class="slide_name">马爹利名士</p>
    		<p class="slide_price">￥458.0</p></a>
    		</div>
    		<div class="slide" >
    		<a ><span ><img src="http://img0.wangjiu.com/ad/20161209/default/1481271116902453"></span>
    		<p class="slide_name">尊尼获加红牌</p>
    		<p class="slide_price">￥199.0</p>
    		</a>
    		</div>
    	</div>
    </div>
     <div class="main">
     	<div class="main_tittle">
        热卖推荐
	</div>
     	<div class="main_content">
   		<ul>
     			<li v-for="data in datas" >
                  <div   class="list"  @click="jump(data)"> 
     			    <span   ><img v-bind:src="url"></span>
     				<p class="name">{{data.title}}</p>
     				<p class="price">￥{{data.price}}</p>
     				 </div> 
     			</li>
     		</ul>
     	</div>
     </div>
     <div class="tip">没有更多了</div>
</div>	
 </template>

<script>
import Swiper from '../../static/swiper.min.js';
export default {
  name: 'home',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      url:"http://img2.wangjiu.com/product-image/20160419/25311344775310586",
      datas:[],
      names:'',
      price:'',
    }
  },
   mounted () {  
    this.lunbo()  
  }, 
  methods:{
  	jump:function(val){
  		this.$router.push({name:"detail"});
  		localStorage.name=val.title;
        localStorage.price=val.price;
      
    
  	},
  
lunbo(){
	var mySwiper = new Swiper ('.swiper-container', {
    pagination: '.swiper-pagination',
    loop: true,
    autoplay:1000,
    autoplayDisableOnInteraction: true,
  })
}
},
  created:function(){
  	var  url="http://www.beautifulmelody.top/index.php?uname=&pwd=&type=%E6%89%80%E6%9C%89";
  	var  sref=this;
  	$.get(url,function(data){
  		var obj=JSON.parse(data);
  		
  		sref.datas=obj.data;
  	});	
    $("footer").show();
}
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../assets/swiper.min.css");  
body{
     margin: 0px;
    padding: 0px;
    background: #f8f8f8;
    font-family: 'Microsoft YaHei';
    font-size: 0.375rem;
    color: #434343;
    max-width: 10rem;
    margin: 0 auto;
}
.headwrap{
    padding-top: 0.14rem;
    width: 100%;
    max-width: 10rem;
    position: fixed;
    z-index: 1000;
    height: 1rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.search{
	 background: #ffffff;
    opacity: 0;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    box-shadow: 0px 2px 5px #999999;
}
.logo{
	position: absolute;
    width: 0.5rem;
    padding-top: 0.03rem;
    right:.6rem;
}
.logo img{
	 width: 100%;
	 height: 100%;
}
.con{
	background-color: rgba(238,238,238,0.55);
    border-radius: 5px;
    width: 7rem;
    overflow: hidden;
    height: 0.7rem;
    margin: 0 auto
}
input{
	display: none;
    border: 0;
    background: none;
    width: 100%;
    float: left;
}
.search_index{
   display: block;
    background: url(../assets/home/image/se01.png) no-repeat;
    position: absolute;
    left: 38%;
    top: 33%;
    display: block;
    width: 2rem;
    height: 0.4rem;
    background-size: 100% 100%;
}
.banner{
    width: 100%;
    height:5.60rem; 
    padding-bottom: 0.5rem;
    overflow: hidden;
}

.banner img{
	width: 100%;
	height: 100%;
}
.menu{
	 padding: 4% 2%;
    overflow: hidden;
    background-color: #ffffff;
   
}
.link{
	 display: block;
    float: left;
    color: #333;
    font-size: 0.35rem;
    text-decoration: none;
    width: 25%;
    height: 1.85rem;
    text-align: center;
}
.link img{
	 display: block;
    width: 1.2rem;
  
    margin: 0 auto;
    padding-bottom: 6%;
}
.link span{
 display: inline-block;
    height: 0.4rem;
   
    color: #666666;
    padding-bottom: 0.4rem;
}
.contain{
	 margin-top: 0.25rem;
    height: 9rem;
    overflow: hidden;
    position: relative;
    background-color: #ffffff;
}
.contain .pro0{
	width: 5rem;
    height: 6rem;
    border-left: none;
}
.contain a{
	float: left;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: relative;
}
.contain img{
	 width: 100%;
    height: 100%;
}
.contain .pro1{
	width: 5rem;
    height: 3rem;
    float: none;
    position: absolute;
    right: 0;
    overflow: hidden;
    border-left: none;
    border-right: none;
}
.contain .pro2{
	width: 5rem;
    height: 3rem;
    float: none;
    position: absolute;
    right: 0;
    overflow: hidden;
    top: 3rem;
    border-left: none;
    border-right: none;
    border-top: none;
}
.contain .pro3{
	width: 5rem;
    height: 3rem;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    top: 6rem;
    border-top: none;
    border-left: none;
}
.contain .pro4{
	 width: 5rem;
    height: 3rem;
    position: absolute;
    bottom: 0;

    right: 0;




    overflow: hidden;
    top: 6rem;
    border: none;
}
.stage{
	 background-color: #fff;
}
.stage_banner{
	 margin-top: 0vw;
    width: 100%;
    overflow: hidden;
    padding-bottom: 10px;
    background-color: #f2f2f2;
}
.stage_banner a{
	color: #434343;
    text-decoration: none;
}
.stage_banner a img{

	 width:100%;


    height: 2.18rem;
    display: block;
}
.stage_menu{
	padding-top: 0.3rem;
    height: 2.5rem;
    position: relative;
    background-color: #ffffff;
    padding-bottom: 0.3rem;
}
.stage_menu a img{
	width: 100%;
    height: 100%;
}
.vos1{

	width: 32%;

    height: 2.75rem;
    position: absolute;
    left: 0rem;
    top: 0.17rem;
}
.vos2{

    width: 32%;

    height: 2.75rem;
    position: absolute;
    left: 34%;
    top: 0.17rem;
}
.vos3{
	width: 32%;

    height: 2.75rem;
    position: absolute;
     right: 0;
    top: 0.17rem;
}

.box1_coat{
   position: relative;
   padding-top: 0.2rem;
   background-color: #ffffff;
}
.box1_coat a{
	color: #434343;
    text-decoration: none;
}
.box1_coat a  img{
	width: 100%;
    height: 3.70rem;
    background-color: #f2f2f2;
    margin-top: 9px;
    display: block;
}
.box1_contain{
	width: 100%;
	height: 3.69rem;
	
}
.slide{ 
	 float: left;
	width: 33.333%;
    height: 100%;
    position: relative;
}
.slide  a{
	 display: block;
   
    color: #333;
    font-size: 0.33rem;
    text-decoration: none;
    width: 100%;
    padding-bottom: 0.33rem;
    text-align: center;
}
.slide a span{
	 display: block;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 2px;
}
.slide a span img{
	display: block;
    margin: 0 auto;
    width: 2.7rem;
    height: 2.7rem;
}

.slide_name{
	 text-align: center;
    color: #000;
    width: 100%;
    line-height: 100%;
    font-size: 0.33rem;
    white-space: nowrap;
    
}
.slide_price{

    height: 1.2em;
    overflow: hidden;
    color: #ca0915;
    text-align: center;
    padding-bottom: 0.1rem;
}
.main{
position: relative;
}
.main_tittle{
	 width: 100%;
    overflow: hidden;
    text-align: center;
    color: #666666;
    font-size: 0.37rem;
    position: relative;
    margin-top: 6vw;
    margin-bottom: 0.3rem;
    background-color:#f8f8f8;
}
.main_tittle:before{
	position: absolute;
    left: 75%;
    top: 50%;
    -webkit-transform: translateX(-50%);
    content: '';
    width: 2.6rem;
    height: 1px;
    background-color: #dfdfdf;
}
.main_tittle:after{

   position: absolute;
    left: 25%;
    top: 50%;
    -webkit-transform: translateX(-50%);
    content: '';
    width: 2.6rem;
    height: 1px;
    background-color: #dfdfdf;
   }
.main_content{
	width:100%;

}
.main_content ul{
	width:100%;
	
}
.main_content ul li{
	float: left;
    width: 50%;
    margin-right: 0;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 3px;
    text-align: center;
    padding: 0;
    background-color: transparent;
    
}
 .list{
	 padding: 3px;
    display: block;
    background-color: #fff;
}
.list img{
	width: 100%;
}
.name{
     margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    color: #333;
    text-align: left;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.37rem;
    padding-right: 0.2rem;
    padding-left: 0.2rem;
}
.price{
	display: block;
	 color: #ca0915;
    font-size: 0.4375rem;
    text-align: left;
    padding-left: 0.18rem;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
}
.tip{
	font-size: 0.35rem;
    color: #999;
    text-align: center;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    display:block;

}
</style>
